{% extends 'layout/base.html' %}
{% load static %}

{% block title %}用户注册{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock css %}

{% block content %}
    <div class="account">
    <div class="title">用户注册</div>
    <br />
    <form class="form-horizontal" method="post" id="regForm" novalidate>
    {% csrf_token %}
        {% for field in form %}
            {% if field.name == 'verify_code' %}
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="col-sm-10">
                        <div class="col-sm-6" style="padding-left: 0">{{ field }}</div>
                        <div class="col-sm-6"><input type="button" id="btnSms" class="btn btn-default" value="获取验证码"></div>
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field }}
                    <span class="error-msg"></span>
                </div>
            </div>
            {% endif %}
          {% endfor %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" id="btnSubmit" class="btn btn-primary">注册</button>
                </div>
            </div>
    </form>
    </div>
{% endblock content %}

{% block js %}
    <script type="text/javascript">
        $(function (){

            // 发送验证码
            $('#btnSms').click(function (){
                // 获取手机号及模板字符串
                $('.error-msg').empty();
                var mobile_phone =  $('#id_mobile_phone').val();
                var tpl = 'register';
                var params = {'mobile_phone': mobile_phone, 'tpl': tpl};
                $.ajax({
                    url: '{% url 'web:sms' %}',
                    type: 'post',
                    data: params,
                    dataType: 'json'
                }).done(function (data){
                    if (data.code === 200) {
                        // 发送成功
                        // 60秒倒计时
                        var num = 60;
                        var btn = $('#btnSms');
                        // 进行设置时间
                        var time = setInterval(function () {
                            num -= 1;
                            btn.val(num + "s后重获验证码");
                            // 添加禁用点击效果
                            btn.addClass('disabled');
                            if (num === 0) {
                                clearInterval(time);
                                btn.val("获取验证码");
                                // 解除禁用点击效果
                                btn.removeClass('disabled');
                            }
                        }, 1000);
                    }else{
                        // 发送失败
                        console.log(data.msg);
                        // 将错误信息放在页面栏
                        $.each(data.msg, function (key, value){
                            $('#id_' + key).next().text(value[0])
                        });
                    }
                }).fail(function (){
                    console.log("网络超时");
                });
            });

            // 用户注册
            $('#btnSubmit').click(function (){
                $('.error-msg').empty();

               // 获取用户数据，简单校验后发送到后台
                /*
                var csrf = $('input[name=csrfmiddlewaretoken]').val();
                var username = $('#id_username').val();
                var email = $('#id_email').val();
                var mobile_phone =  $('#id_mobile_phone').val();
                var password = $('#id_password').val();
                var confirm_password = $('#id_confirm_password').val();
                var verify_code = $('#id_verify_code').val();
                */
                /*
                // 简单数据校验
                if (username.length === 0 && email.length === 0 && verify_code.length === 0){
                    return;
                }

                // 密码校验
                if (password !== confirm_password){
                    $('#id_confirm_password').next().text('密码不一致');
                    return;
                }
                */
                /*
                params = {
                        'csrfmiddlewaretoken': csrf,
                        'username': username,
                        'email': email,
                        'mobile_phone': mobile_phone,
                        'password': password,
                        'confirm_password': confirm_password,
                        'verify_code': verify_code
                };
                */

                <!--一次获取所有的input内容, 包括CSRF-->
                params = $('#regForm').serialize();
                $.ajax({
                    url: "{% url 'web:register' %}",
                    type: 'post',
                    data: params,
                    dataType: 'json'
                }).done(function (data){
                    if (data.code === 200){
                        location.href = data.msg;
                    }else{
                         $.each(data.msg, function (key, value){
                             console.log(key+"-----"+value);
                            $('#id_' + key).next().text(value[0])
                         });
                    }
                }).fail(function (){
                    console.log("网络超时");
                })

            });
        });
    </script>
{% endblock js %}